<template>
  <div>
    <el-row type="flex" style="height: 100%">
      <el-col :sm="4"></el-col>
      <el-col :sm="16">
        <el-card shadow="never">
          <div>
            <h2 class="newsTitle">{{ this.title }}</h2>
            <div class="blogInfo">
              <ul>
                <li @click="onSubmit(tid,'type')" style="cursor: pointer"><i class="el-icon-menu"></i> {{ this.blogType }}</li>
                <li><i class="el-icon-view"></i> {{ this.reads }}</li>
                <li>最近更新 <i class="el-icon-time"></i> {{ this.updateTime }}</li>
              </ul>
            </div>

            <div>
              <el-divider></el-divider>
            </div>
            <div v-highlight v-html="article">

            </div>
          </div>
          <div class="article">
            <span>-------------本文结束<i class="fa fa-heart-o"></i>感谢您的阅读-------------</span>
          </div>
          <div>
            <el-tag
              size="mini"
              type="success"
              v-for="label in blogLabel"
              v-bind:key="label"
              effect="dark"
              @click="onSubmit(label,'label')">
              <i class="fa fa-tag" aria-hidden="true"></i>{{ label }}
            </el-tag>
          </div>
        </el-card>
        <el-card shadow="always">
          <div style="padding: 50px 0 50px 0">
            <Comment></Comment>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="4"></el-col>
    </el-row>
  </div>
</template>

<script>
import marked from 'marked'
import "highlight.js/styles/vs2015.css"
import Comment from "./Comment";
import qs from 'qs'

export default {
  name: "ShowBlog",
  components: {
    Comment,
  },
  data() {
    return {
      title: '',
      author: '',
      createTime: '',
      updateTime: '',
      blogLabel: [],
      blogType: '',
      bid:'',
      tid:'',
      reads: 0,
      likeNum: 0,
      article: '',
      editType: 1,
      blogDetail: this.$store.state.blogDetail,
    }
  },
  /*computed:{
    blogDetail:function (){
      return this.$store.state.blogDetail;
    }
  },*/
  watch: {
    "$store.state.blogDetail"() {
      this.blogDetail = this.$store.getters.getBlogDetail;
      this.getBlogDetail();
      this.addReads();
    }
  },
  created() {
    if (sessionStorage.getItem("blogDetail") != null) {
      this.blogDetail = JSON.parse(sessionStorage.getItem("blogDetail"));
      //this.$store.commit("setBlog", this.blogDetail);
    }
  },
  methods: {
    onSubmit(id,type){
      this.$router.push({path:'/blog/search',query:{keyword:id, type:type}});
    },
    getBlogDetail() {
      this.title = this.blogDetail.title;
      this.author = this.blogDetail.author;
      this.createTime = this.blogDetail.createTime;
      this.updateTime = this.blogDetail.updateTime;
      this.blogLabel = this.blogDetail.blogLabel;
      this.blogType = this.blogDetail.blogType;
      this.bid = this.blogDetail.bid;
      this.tid = this.blogDetail.tid;
      this.reads = this.blogDetail.reads;
      this.likeNum = this.blogDetail.likeNum;
      if (this.blogDetail.editType === 2) {
        this.article = marked(this.blogDetail.article);
      } else {
        this.article = this.blogDetail.article;
      }
    },
    addReads(){
      this.axios.post('/blog/updateBlogReads',qs.stringify({
        bid:this.bid,
        reads:this.reads+1,
      })).then((response)=>{

      })
    }
  },
  destroyed() {
    this.bus.$off()
  },
}
</script>

<style scoped>
.newsTitle {
  color: #333;
  text-align: center;
  font-size: 26px;
  padding-bottom: 10px;
  margin-bottom: 0;
}

.blogInfo {
  width: 100%;
  font-size: 12px;
  color: #999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.blogInfo ul li {
  float: left;
  font-size: 12px;
  color: #748594;
  line-height: 1.5;
  display: inline-block;
}

ul {
  padding-left: 0;
}

li {
  padding-left: 20px;
}

.el-tag {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 15px;
  cursor: pointer;
}
.el-card{
  padding: 20px;
}

i {
  font-size: 15px;
}

.article {
  text-align: center;
  color: #ccc;
  font-size: 16px;
  padding: 20px 0;
}

.el-card {
  margin-bottom: 10px;
}

>>> blockquote {
  font: 14px/22px normal helvetica, sans-serif;
  margin: 10px 0 10px 0;
  padding: 5px 10px 5px 15px;
  border-left: 5px solid #24f627;
  background-color: #f1f1f1
}

>>> img {
  width: 100%;
}

>>> code {
  font-size: 15px;
}

>>> h1 {
  font-size: 32px;
}

>>> h2 {
  font-size: 24px;
}

>>> h3 {
  font-size: 18.72px;
}

>>> h4 {
  font-size: 16px;
}

>>> h5 {
  font-size: 13.28px;
}

>>> h6 {
  font-size: 12px;
}

</style>
